<template>
    <div class="task-add i_maxW">
        <div class="prepare-crumbs">
            <router-link to="/prepare">备课<i>></i></router-link>
            <span @click="goBack">{{$route.query.name}}</span>
            <span><i>></i>发布任务</span>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="任务名称" prop="name">
                <el-input v-model="ruleForm.name"  placeholder="最多可以输入20个字符" maxlength="20"></el-input>
            </el-form-item>

            <el-form-item label="任务关联" prop="relation" class="relation-box">
                <el-button type="primary" @click="TaskAssociation">选择</el-button>
                <span v-if="taskObject">{{taskObject.res_name}}</span>
                <el-input v-model="ruleForm.relation"  placeholder="最多可以输入20个字符" ></el-input>
            </el-form-item>

            <el-form-item label="任务对象" prop="classArr">
                <el-checkbox-group v-model="ruleForm.classArr">
                  <el-checkbox  v-for="item of classList" :label="item.id" name="type" :key="item.id">{{item.rename}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

      <!--       <el-form-item prop="date" label="截止时间">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ruleForm.date"  :picker-options="pickerOptionsStart"></el-date-picker>
            </el-form-item> -->

            <el-form-item label="截止时间" prop="date">
               <!-- <el-date-picker type="date"  placeholder="选择日期"  v-model="ruleForm.date" :picker-options="pickerOptionsStart"></el-date-picker> -->
                 <el-date-picker
                  v-model="ruleForm.date"
                   type="datetime"  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm" :picker-options="pickerOptionsStart">
               </el-date-picker>
            </el-form-item>


            <el-form-item prop="time" label="任务时长" class="task-times">
                 <el-input-number v-model="ruleForm.time"  :min="1" :max="1000" label="选择时间"></el-input-number>
                 <span>分钟</span>
            </el-form-item>


            <el-form-item label="任务内容" prop="content">
                <el-input type="textarea" :rew="4" v-model="ruleForm.content" placeholder="最多可以输入200个字符" maxlength="200"></el-input>
            </el-form-item>

            <el-form-item class="buttonCSS">
            	<el-button @click="resetForm('ruleForm')" plain>取消</el-button>
                <el-button type="primary" v-preventReClick="1000" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>

        <el-dialog
          title="选择资源"
          :visible.sync="dialogVisible"
          width="800px"
          top="10vh"
          custom-class="relation-dialog"
          :close-on-click-modal="false">
            <div class="relation-cont">
                <!--  -->
                <div class="relation-batle">
                    <el-table
                       ref="multipleTable"
                       :data="taskList"
                       :border="true"
                       highlight-current-row
                        @current-change="handleCurrentChange" @row-click="showStandardradio"
                       style="width: 100%" :row-class-name="resourceRowClassName">
                       <el-table-column
                         type="index"
                         width="45">
                         <template slot-scope="scope">
                             <el-radio class="prepare-radio" v-model="standardradio" :label="scope.$index"></el-radio>
                         </template>
                       </el-table-column>
                       <el-table-column
                         property="res_name"
                         label="资源名称"
                         show-overflow-tooltip>
                       </el-table-column>
                       <el-table-column
                         property="res_type"
                         label="类型"
                         show-overflow-tooltip>
                       </el-table-column>
                       <el-table-column
                         property="createname"
                         label="上传人"
                         show-overflow-tooltip>
                       </el-table-column>
                       <el-table-column
                         property="uploadtime"
                         label="上传时间"
                         show-overflow-tooltip>
                       </el-table-column>
                     </el-table>
                    <el-pagination
                        @size-change="resourceChangeSize"
                         @current-change="resourceChange"
                         :current-page.sync="page_index"
                         :page-size="page_size"
                         layout="sizes, total, prev, pager, next"
                          :page-sizes="[10, 20, 30, 50, 100]"
                         :total="total_sum">
                    </el-pagination>
                </div>
                <div class="relation-btn buttonCSS">
                    <el-button type="primary" @click="dialogVisible = false" plain>取消</el-button>
                    <el-button type="primary" @click="resourceSbulmit()">确定</el-button>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>

    export default {
        data() {
            return {
                pickerOptionsStart: {
                    disabledDate: (time) => {
                        return time.getTime() < parseInt(Date.now() - 8.64e7);
                    }
                },
                ruleForm: {
                    name: '',
                    relation: '',
                    classArr: [],
                    date: '',
                    time: 100,
                    content: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入任务名称', trigger: 'blur' },
                    ],
                    relation: [
                        { required: true, message: '请选择任务关联内容', trigger: 'change'}
                    ],
                    classArr: [
                        { required: true, message: '请至少选择一个', trigger: 'change' }
                    ],
                    date: [
                        { required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    time: [
                        { required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: '请填写任务内容', trigger: 'blur' }
                    ]
                },
                dialogVisible: false,
                taskSelection: [],
                taskList: [],
                page_index: 1,
                page_size: this.$g.page_size,
                total_sum: 0,
                classList: [],
                taskObject: null,

                standardradio: '',
                standardradioID: '',
                 multipleSelection3: [],
            }
        },
        created(){
            this.TaskObject()
        },
        watch: {
            'page_index':{
                handler(newVal) {
                    this.taskList = this.taskList.slice((newVal - 1)*5, (newVal - 1)*5 + 5);
                    this.standardradio = '';
                }
            },
        },
        methods: {
            /**
             * 选择的资源高亮
             * @DateTime 2020-06-03T15:53:56+0800
             * @qiu_m
             * @param    {[type]}                 row [description]
             * @return   {[type]}                     [description]
             */
            resourceRowClassName({row, rowIndex}){

                return (this.taskObject && this.taskObject.res_id) == row.res_id ? 'warning-row' : ''; 
            },
            /*
                选择评估标准
            */
            handleCurrentChange(val) {
               this.multipleSelection3 = []
               this.multipleSelection3.push(val);
               
            },

            // 单选框，选择点击的数据
            showStandardradio(row){
                this.standardradio = this.taskList.indexOf(row);
                this.standardradioID = row.res_id;
            },
            //任务对象
            TaskObject(){
                let success = (res=>{
                    this.classList = res.data;
                })

                this.$ajax({
                    url: 'api/org/class_userid',
                    method: 'get',
                    params: {user_id: this.$g.user_id},
                    func: {success: success}
                })
            },
            //任务关联
            resourceSbulmit(){
                // if (this.taskSelection == '') {
                //     this.$message.error('请选择');
                //     return
                // }

                if (this.multipleSelection3.length === 0) {
                      return this.$message.error('选择视评估标准')
                } else {
                   this.taskObject  = this.multipleSelection3[0];
                    this.ruleForm.relation = this.standardradioID
                    this.dialogVisible = false
                }
                // this.taskObject = this.taskSelection
                // this.ruleForm.relation = this.taskObject.res_id

                // this.dialogVisible = false
            },
            TaskAssociation(){
                this.standardradio= ''
                this.standardradioID = ''
                this.multipleSelection3 = []
                this.dialogVisible = true;
                this.TaskData()
               
            },
            //任务关联
            TaskData(){
                let success = (res=>{
                    this.taskList = res.data.data;
                    this.total_sum = parseInt(res.data.data_sum)
                })

                this.$ajax({
                    url: 'api/prepare/prepare_res_list',
                    method: 'get',
                    params: {
                        page_index: this.page_index,
                        page_size: this.page_size,
                        prepareid: this.$route.query.id
                    },
                    func: {success: success}
                })
            },
            taskSelectionChange(val) {
                this.taskSelection = val;
                
            },
            goBack() {
                this.$router.back(-1)
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                       
                       let success = (res=>{
                            this.$message.success(res.msg);
                            this.$router.back(-1)
                       })

                       let timestampToTime = deep_clone(this.ruleForm.date)
                       this.$ajax({
                            url: 'api/prepare/prepare_task',
                            method: 'post',
                            data: {
                                userid: this.$g.user_id,
                                videoid: `${this.ruleForm.relation},${this.taskObject.origin}`,
                                classid: this.ruleForm.classArr,
                                end_time: this.ruleForm.date,
                                task_name: this.ruleForm.name,
                                length: this.ruleForm.time,
                                profile: this.ruleForm.content,
                                prepare_id: this.$route.query.id
                            },
                            func: {success: success}
                       })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                // this.$refs[formName].resetFields();
                this.$router.back(-1)
            },
            resourceChange(val){
                this.page_index = val;
                this.TaskData()
            },
            resourceChangeSize(val){
                this.page_index = 1;
                this.page_size = val;
                this.TaskData()
            }
        }
    }
</script>